<template>
  <div class="user-list">
    <content-header-wrapper />
    <a-card style="margin: 10px 0 0 0">
      <h2>{{ $route.meta.title }}</h2>
      <div class="user-list-table">
        <a-button
          type="primary"
          icon="plus-circle"
          style="margin-bottom: 12px"
          @click="addUser()"
          >新增</a-button
        >
        <a-table
          :columns="columns"
          :data-source="tableData"
          :rowKey="(record, index) => index"
          :pagination="pagination"
          :loading="tableLoading"
          :bordered="false"
          @change="onChange"
        >
          <span slot="registerStatus" slot-scope="text, record">
            <a-tag v-if="record.registerStatus == 2">已认证</a-tag>
            <a-tag v-if="record.registerStatus == 1" color="#f50">未认证</a-tag>
          </span>
          <template slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="edit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除这个用户吗？"
              ok-text="删除"
              cancel-text="取消"
              @confirm="() => onDelete(record.userId)"
              @cancel="() => qDelete(record.userId)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </div>
      <user-edit-modal
        :visible="visible"
        :editType="editType"
        :userDetailsData="userDetailsData"
        @handleOk="handleOk"
        @handleCancel="handleCancel"
      />
    </a-card>
  </div>
</template>

<script>
import { getAllUser, deleteUser } from "../../api/user/user";
import UserEditModal from "./modules/UserEditModal";
import ContentHeaderWrapper from "../../components/ContentHeaderWrapper/ContentHeaderWrapper.vue";

const columns = [
  {
    title: "id",
    dataIndex: "userId",
    key: "userId",
    // width: "160px",
    // align: "center",
  },
  {
    title: "昵称",
    dataIndex: "nickName",
    key: "nickName",
    // width: "170px",
  },
  {
    title: "真实名字",
    dataIndex: "realName",
    key: "realName",
    // width: "170px",
  },
  {
    title: "年级",
    dataIndex: "grade",
    key: "grade",
    // scopedSlots: { customRender: 'endTime' },
  },
  {
    title: "系院组织",
    dataIndex: "schoolName",
    key: "schoolName",
    // scopedSlots: { customRender: 'endTime' },
  },
  {
    title: "电话",
    dataIndex: "phone",
    key: "phone",
    // width: "150px",
    // scopedSlots: { customRender: "beginTime" },
  },
  {
    title: "认证状态",
    key: "registerStatus",
    width: "150px",
    scopedSlots: { customRender: "registerStatus" },
  },
  {
    title: "操作",
    key: "action",
    width: "150px",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  name: "UserList",
  components: {
    ContentHeaderWrapper,
    UserEditModal,
  },
  data() {
    return {
      tableLoading: false,
      columns,
      tableData: [],
      labelCol: 3,
      wrapperCol: 20,
      pagination: {
        current: 1,
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: 0,
        showQuickJumper: true,
        showSizeChanger: false,
        pageSizeOptions: ["5", "10", "20", "50"],
        showTotal: (total) => `共 ${total} 条`,
      },

      visible: false,
      editType: "add",
      userDetailsData: {},
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    // 获取列表
    getUser() {
      this.tableLoading = true;
      const requestValue = {
        currPage: this.pagination.current,
        pageSize: this.pagination.defaultPageSize,
      };
      getAllUser(requestValue)
        .then((res) => {
          const result = res.data.data;
          const pagination = { ...this.pagination };
          pagination.total = result.total;
          this.pagination = pagination;
          this.tableData = result.list;
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    // 切换页码时触发
    onChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getUser();
    },

    // 新增
    addUser() {
      this.editType = "add";
      this.visible = true;
    },

    // 编辑
    edit(record) {
      // console.log(record)
      this.userDetailsData = record;
      console.log("");
      this.editType = "change";
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
      this.$notification.open({
        message: "更新成功",
        icon: <a-icon type="smile" style="color: #108ee9" />,
      });
      setTimeout(() => {
        this.userDetailsData = {};
        this.getUser();
      }, 500);
    },
    handleCancel() {
      this.visible = false;
      setTimeout(() => {
        this.userDetailsData = {};
      }, 500);
    },

    // 确定删除
    onDelete(id) {
      console.log(id);
      const requestValue = {
        userId: id,
      };
      deleteUser(requestValue).then((res) => {
        console.log(res);
        this.$notification.open({
          message: "删除用户成功",
          icon: <a-icon type="smile" style="color: #108ee9" />,
        });
        this.getUser();
      });
    },

    // 取消删除
    qDelete(id) {
      console.log(id);
    },
  },
};
</script>

<style lang="less" scoped>
.user-list-table {
  padding: 30px 20px 0 20px;
}
</style>
